<template>
  <div>
    <div class="htm1">
      <div class="htm2" @click="movieInfo(0)">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[0]" class="image" />
          <div>
            <span class="htm3">中国机长</span>
          </div>
        </el-card>
      </div>
      <div class="htm2" @click="movieInfo(1)">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[1]" class="image" />
          <div>
            <span  class="htm3">侏罗纪世界3</span>
          </div>
        </el-card>
      </div>
      <div class="htm2" @click="movieInfo(2)">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[2]" class="image" />
          <div>
            <span  class="htm3">奇迹笨小孩</span>
          </div>
        </el-card>
      </div>
      <div class="htm2" @click="movieInfo(3)">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="zhanshi[3]" class="image" />
          <div>
            <span  class="htm3">月球陨落</span>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup>
import router from '@/router'
import '@/assets/scss/userCom/Phone/hotMovie.scss'
const zhanshi = [
  require('@/assets/img/中国机长.jpg'),
  require('@/assets/img/侏罗纪世界3.jpg'),
  require('@/assets/img/奇迹笨小孩.jpg'),
  require('@/assets/img/月球陨落.jpg'),
  require('@/assets/img/这个杀手不太冷静.jpg'),
  require('@/assets/img/长津湖之水门桥.jpg')
]
const movies = [
  '中国机长',
  '侏罗纪世界3',
  '奇迹笨小孩',
  '月球陨落',
  '这个杀手不太冷静',
  '长津湖之水门桥'
]
const movieInfo = (index) => {
  sessionStorage.setItem('movieInfo', JSON.stringify(movies[index]))
  router.push('/movieInfoMobile')
}
</script>
<style lang="scss" scoped>
.image {
  width: 100%;
  display: block;
}
</style>
